// styles/sxobjects.js - GitHub themed dark styles for Dashboard Panels

// Paper component styles
export const paperSx = {
  variant: "outlined",
  sx: {
    backgroundColor: '#21262d', // GitHub dark panel background
    borderColor: '#30363d', // GitHub dark border
    color: '#f0f6fc', // GitHub dark text color
    borderRadius: (theme) => theme.spacing(1),
    border: '1px solid',
    '& .MuiTypography-root': {
      color: '#f0f6fc', // Ensure all typography is white
    },
    '& .MuiTypography-h6': {
      color: '#58a6ff', // GitHub blue for headers
      fontWeight: 600,
    },
    // Override any default MUI dark theme colors
    '& *': {
      borderColor: '#30363d !important',
    }
  }
};

// ListItem component styles
export const listItemSx = {
  button: true,
  sx: {
    color: '#f0f6fc', // GitHub dark text
    borderRadius: 1,
    margin: '2px 8px',
    transition: 'all 0.2s ease-in-out',
    
    '&:hover': {
      backgroundColor: '#30363d', // GitHub hover background
      borderRadius: 1,
      '& .MuiListItemIcon-root': {
        color: '#58a6ff', // GitHub blue on hover
      },
      '& .MuiListItemText-primary': {
        color: '#58a6ff', // GitHub blue text on hover
      }
    },
    
    '&:active': {
      backgroundColor: '#21262d', // Slightly darker on click
    },

    // ListItem Icon styles
    '& .MuiListItemIcon-root': {
      color: '#8b949e', // GitHub muted icon color
      minWidth: '40px',
      transition: 'color 0.2s ease-in-out',
    },
    
    // ListItem Text styles
    '& .MuiListItemText-root': {
      '& .MuiListItemText-primary': {
        color: '#f0f6fc', // GitHub text color
        fontSize: '14px',
        fontWeight: 400,
        transition: 'color 0.2s ease-in-out',
      }
    },

    // Focus styles for accessibility
    '&.Mui-focusVisible': {
      backgroundColor: '#30363d',
      outline: '2px solid #58a6ff',
      outlineOffset: '2px',
    }
  }
};

// Additional utility styles for specific elements
export const typographyHeaderSx = {
  sx: {
    color: '#58a6ff', // GitHub blue
    fontWeight: 600,
    padding: 2,
    paddingBottom: 1,
  }
};

export const listContainerSx = {
  dense: true,
  sx: {
    padding: '0 0 8px 0', // Remove default padding, add bottom spacing
    
    // Override any nested list styles
    '& .MuiListItem-root': {
      paddingLeft: 2,
      paddingRight: 2,
    }
  }
};

// Menu styles to match the theme
export const menuSx = {
  sx: {
    '& .MuiPaper-root': {
      backgroundColor: '#21262d',
      borderColor: '#30363d',
      border: '1px solid',
      color: '#f0f6fc',
    },
    '& .MuiMenuItem-root': {
      color: '#f0f6fc',
      '&:hover': {
        backgroundColor: '#30363d',
        color: '#58a6ff',
      }
    }
  }
};

// Dialog styles to match the theme
export const dialogSx = {
  sx: {
    '& .MuiDialog-paper': {
      backgroundColor: '#21262d',
      borderColor: '#30363d',
      border: '1px solid',
      color: '#f0f6fc',
    },
    '& .MuiDialogTitle-root': {
      color: '#58a6ff',
      borderBottom: '1px solid #30363d',
    },
    '& .MuiDialogContent-root': {
      color: '#f0f6fc',
      backgroundColor: '#21262d',
    },
    '& .MuiDialogActions-root': {
      borderTop: '1px solid #30363d',
      backgroundColor: '#21262d',
    }
  }
};

// Button styles for dialogs
export const buttonPrimarySx = {
  variant: "contained",
  sx: {
    backgroundColor: '#238636', // GitHub green
    color: '#ffffff',
    '&:hover': {
      backgroundColor: '#2ea043', // Lighter green on hover
    },
    '&:disabled': {
      backgroundColor: '#30363d',
      color: '#8b949e',
    }
  }
};

export const buttonSecondarySx = {
  sx: {
    color: '#f0f6fc',
    borderColor: '#30363d',
    '&:hover': {
      backgroundColor: '#30363d',
      borderColor: '#58a6ff',
      color: '#58a6ff',
    }
  }
};

export const buttonDangerSx = {
  variant: "contained",
  sx: {
    backgroundColor: '#da3633', // GitHub red
    color: '#ffffff',
    '&:hover': {
      backgroundColor: '#f85149', // Lighter red on hover
    }
  }
};

// FormControl styles
export const formControlSx = {
  fullWidth: true,
  margin: "normal",
  sx: {
    '& .MuiInputLabel-root': {
      color: '#8b949e',
      '&.Mui-focused': {
        color: '#58a6ff',
      }
    },
    '& .MuiOutlinedInput-root': {
      color: '#f0f6fc',
      '& fieldset': {
        borderColor: '#30363d',
      },
      '&:hover fieldset': {
        borderColor: '#58a6ff',
      },
      '&.Mui-focused fieldset': {
        borderColor: '#58a6ff',
      }
    },
    '& .MuiSelect-root': {
      color: '#f0f6fc',
    },
    '& .MuiMenuItem-root': {
      color: '#f0f6fc',
    }
  }
};

// Alert styles
export const alertSx = {
  sx: {
    backgroundColor: '#21262d',
    border: '1px solid #30363d',
    color: '#f0f6fc',
    '&.MuiAlert-standardSuccess': {
      backgroundColor: '#0d1117',
      borderColor: '#238636',
      color: '#7ee787',
      '& .MuiAlert-icon': {
        color: '#238636',
      }
    },
    '&.MuiAlert-standardError': {
      backgroundColor: '#0d1117',
      borderColor: '#da3633',
      color: '#ffa198',
      '& .MuiAlert-icon': {
        color: '#da3633',
      }
    }
  }
};

